<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="关键字:" prop="name">
        <el-input
          size="mini"
          v-model="queryParams.name"
          placeholder="请输入关键字"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="mini">
          <el-option label="正常" value="0"/>
          <el-option label="下架" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:enterpriseRecommend:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['system:enterpriseRecommend:import']"
        >导入
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="序号" type="index" align="center" min-width="5%"/>
      <el-table-column label="企业名称" :show-overflow-tooltip="true" prop="name" key="name" align="center"
                       width="300"/>
      <el-table-column label="社会统一信用代码" :show-overflow-tooltip="true" prop="uscc" key="uscc" align="center"
                       width="200"/>
      <el-table-column label="通讯地址" :show-overflow-tooltip="true" prop="address" key="address" align="center"
                       width="200"/>
      <el-table-column label="法人代表" :show-overflow-tooltip="true" prop="legalRepresentative"
                       key="legalRepresentative" align="center" width="200"/>
      <el-table-column label="所属行业" prop="industry" key="industry" align="center" width="200"/>
      <el-table-column label="联系电话" prop="tel" key="tel" align="center" width="200"/>
      <el-table-column label="成立时间" prop="establish" key="establish" align="center" width="200"/>
      <el-table-column label="注册资金(万元)" prop="registeredCapital" key="registeredCapital" align="center"
                       width="200"/>
      <el-table-column label="占地面积(㎡)" prop="coverAnArea" key="coverAnArea" align="center" width="200"/>
      <el-table-column label="排序" prop="sort" key="sort" align="center" width="200"/>
      <el-table-column label="状态" align="center" width="200">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '0'">正常</el-tag>
          <el-tag v-else type="danger">下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" align="center" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" class-name="small-padding fixed-width" align="center" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleEdit(scope.row)"
            v-hasPermi="['system:enterpriseRecommend:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:enterpriseRecommend:remove']"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="goDetail(scope.row)"
            v-hasPermi="['system:enterpriseRecommend:query']"
          >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog title="详情" :visible.sync="detailOpen" width="800px" append-to-body>
      <el-form :model="detail" ref="form" label-width="120px">
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="企业名称: ">
                {{ detail.name }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="社会统一信用代码: ">
                {{ detail.uscc }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="通讯地址: ">
                {{ detail.address }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="法人代表: ">
                {{ detail.legalRepresentative }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="所属行业: ">
                {{ detail.industry }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="联系电话: ">
                {{ detail.tel }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="成立时间: ">
                {{ detail.establish }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="注册资金(万元): ">
                {{ detail.registeredCapital }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="占地面积(㎡): ">
                {{ detail.coverAnArea }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="主营经营范围: ">
                {{ detail.mainBusiness }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="创建时间: ">
                {{ detail.createTime }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="排序: ">
                {{ detail.sort }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="状态: ">
                <el-tag v-if="detail.status === '0'">正常</el-tag>
                <el-tag v-else type="danger">下架</el-tag>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <p style="color: #ee3131">注：拥有相同的企业名称只会保留一条。</p>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                   @click="importTemplate">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="企业名称:" prop="name">
          <el-input v-model="form.name" placeholder="请输入企业名称"/>
        </el-form-item>
        <el-form-item label="社会统一信用代码:" prop="uscc">
          <el-input v-model="form.uscc" placeholder="请输入社会统一信用代码"/>
        </el-form-item>
        <el-form-item label="通讯地址:" prop="address">
          <el-input v-model="form.address" placeholder="请输入通讯地址"/>
        </el-form-item>
        <el-form-item label="法定代表人:" prop="legalRepresentative">
          <el-input v-model="form.legalRepresentative" placeholder="请输入法定代表人"/>
        </el-form-item>
        <el-form-item label="所属行业:" prop="industry">
          <el-input v-model="form.industry" placeholder="请输入所属行业"/>
        </el-form-item>
        <el-form-item label="联系电话:" prop="tel">
          <el-input v-model="form.tel" placeholder="请输入联系电话"/>
        </el-form-item>
        <el-form-item label="成立时间:" prop="establish">
          <el-date-picker
            style="width: 100%"
            v-model="form.establish"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="注册资金:" prop="registeredCapital">
          <el-input type="number" v-model="form.registeredCapital" placeholder="请输入注册资金">
            <template slot="append">万元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="占地面积:" prop="coverAnArea">
          <el-input type="number" v-model="form.coverAnArea" placeholder="请输入占地面积">
            <template slot="append">㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="主要经营范围:" prop="mainBusiness">
          <el-input type="textarea" v-model="form.mainBusiness" placeholder="请输入主要经营范围"/>
        </el-form-item>
        <el-form-item label="显示排序:" prop="sort">
          <el-input-number v-model="form.sort" controls-position="right" :min="0"/>
        </el-form-item>
        <el-form-item label="状态:" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">下架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {pageList, getInfo, add, edit, remove} from '@/api/triones/enterpriseRecommend'
import {getToken} from "@/utils/auth";

export default {
  name: "index",
  dicts: ['enterprise_status'],
  data() {
    return {
      loading: false,
      showSearch: true,
      total: 0,
      dataList: [],
      title: "",
      auditOpen: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        status: undefined
      },
      auditForm: {
        id: undefined,
        status: undefined,
        failRemark: undefined
      },
      detailOpen: false,
      detail: {},
      upload: {
        open: false,
        title: "",
        isUploading: false,
        updateSupport: 0,
        headers: {Authorization: "Bearer " + getToken()},
        url: process.env.VUE_APP_BASE_API + "/system/enterpriseRecommend/importData"
      },
      open: false,
      form: {},
      rules: {
        name: [
          {required: true, message: "请输入企业名称", trigger: "blur"}
        ],
        uscc: [
          {required: true, message: "请输入社会统一信用代码", trigger: "blur"}
        ],
        address: [
          {required: true, message: "请输入通讯地址", trigger: "blur"}
        ],
        legalRepresentative: [
          {required: true, message: "请输入法定代表人", trigger: "blur"}
        ],
        industry: [
          {required: true, message: "请输入所属行业", trigger: "blur"}
        ],
        tel: [
          {required: true, message: "请输入联系电话", trigger: "blur"}
        ],
        establish: [
          {required: true, message: "请选择成立时间", trigger: "blur"}
        ]
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取表格数据
    getList() {
      this.loading = true;
      pageList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    goDetail(row) {
      const id = row.id;
      getInfo(id).then(response => {
        this.detail = response.data;
        this.detailOpen = true;
      })
    },
    handleImport() {
      this.upload.title = "推荐企业导入";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('system/enterpriseRecommend/importTemplate', {}, `enterprise_template_${new Date().getTime()}.xlsx`)
    },
    handleAdd() {
      this.reset();
      this.title = '添加企业';
      this.open = true;
    },
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        uscc: undefined,
        address: undefined,
        legalRepresentative: undefined,
        industry: undefined,
        tel: undefined,
        establish: undefined,
        registeredCapital: undefined,
        coverAnArea: undefined,
        mainBusiness: undefined,
        sort: 0,
        status: '0'
      };
      this.resetForm("form");
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.open = true;
          if (this.form.id != null) {
            edit(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    handleDelete(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除企业名称为"' + row.name + '"的数据项？').then(() => {
        this.loading = true;
        return remove(id);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).finally(() => {
        this.loading = false;
      });
    },
    handleEdit(row) {
      this.reset();
      const id = row.id;
      getInfo(id).then(response => {
        this.form = response.data;
        this.title = '修改企业';
        this.open = true;
      })
    },
  }
}
</script>
<style scoped lang="scss">

</style>
